<template>
  <Card class="generate-card" :title="title" dis-hover>
    <div style="text-align: center">
      <div class="value">{{ value }}</div>
      <Space style="margin-top: 20px" wrap>
        <slot name="operate"></slot>
      </Space>
      <Space style="margin-top: 20px" wrap>
        <slot name="operateButton"></slot>
      </Space>
      <Space style="margin-top: 20px" wrap>
        <slot name="buttonBefore"></slot>
        <Button type="primary" class="generate-button" @click="onClick">点击生成</Button>
        <Button @click="copy">点击复制</Button>
      </Space>
      <slot></slot>
      <div class="generate-card-footer" v-if="remark">
        <Divider/>
        <Text v-if="remark" type="secondary">{{ remark }}</Text>
      </div>
    </div>
  </Card>
</template>

<script>
import simpleUtils from "@/utils/simpleUtils";

export default {
  name: "GenerateCard",
  props: {
    title: String,
    value: String,
    remark: String
  },
  methods: {
    onClick() {
      this.$emit('generate');
    },
    copy() {
      this.$Copy({
        text: this.value
      })
    }
  },
}
</script>

<style lang="scss" scoped>
@media screen and (max-width: 768px) {
  .generate-card {
    width: 90% !important;
  }
}

.generate-card {
  margin: 0 auto;
  width: 800px;

  .value {
    font-size: 30px;
    font-weight: bold;
    word-wrap: break-word;
  }

  .fixed-top-right {
    position: absolute;
    top: 0;
    right: 0;
  }

  .generate-card-footer {
    margin-top: 20px;

    .ivu-divider {
      margin: 10px 0;
    }
  }
}
</style>
